許多人會問道：

• 非本科如何轉職
• 前端是從哪個方面入門
• 花了多少時間轉職前端

在「六角學院」的網站有提供相當多的方向及案例，不過這邊就來說說我的學習過程吧。

首先，稍微提一下我原本的經歷，以下是在投入前端前的相關學習經驗，過去就有接觸過程式語言，基本上都是自己翻書強迫學習。

• 七、八年以上的美學、平面設計經歷
• 研究所自行投入 ActionScript 3.0 的學習
• 大學期間有接過網頁案子，主要是用 Dreamweaver 為主，還看不懂 CSS
• 研究所期間摸過 asp 並完成過專案
• 擅長 Flash 動畫

雖然學習過程中除了美學以外，有接觸相關程式相關領域的知識，但對於業界所需的能力來說還差距非常遠。

知道自己不足，就應給自己壓力

剛成為網頁設計師的那幾年，正好是響應式網頁慢慢開始流行的時間點，當時如果可以掌握該技術，自然能夠成為市場的搶手貨，就如同現在掌握「JavaScript 框架」的概念是接近的。

而我也很清楚自己是還沒有辦法掌握該技能，因此就投入許多時間在「網頁設計領域」上，學習部分分為：

• CSS 基礎能力：這是一開始最急迫性加強的，當時選擇的是 CSS 教程 這份教學，它並非依據從簡到深的教學文件，而是直接進入深度的語法使用觀念，基本上掌握這份就有一定的 CSS 基礎，並且在 jQuery 的 Selector 上會很強。
• 網頁執行能力：網頁設計與平面設計執行上有很大的不同，平面設計在設計稿完成以後，最後印刷如果沒有使用特殊技法，基本上差異並不大；而網頁設計除了畫面外，更要具備有完稿的能力，並且能夠提高網頁設計的「視覺邏輯」。
• 進階 CSS：只有純 CSS 只是將設計稿給執行出來，但並不具備有視覺邏輯與程式思維的整合，後來花了數年的時間學習 Sass 及 OOCSS 的觀念，更能了解什麼是「模組化」的概念。

強迫改變

而學習的過程中，除了技術的掌握外，工具的選擇也是相當重要的，好的工具不僅能夠有效加速，更能給予正確的觀念；而不好的工具除了效率不佳以外，更會影響學習。

以網頁設計來說，Sketch 或是 Adobe XD 都合適於 UI 上的開發，相對於 Photoshop 及 Illustrator 來說，都有更完整的標示及可被執行性。

在程式碼撰寫也是相同的概念，過去我也放棄使用 Dreamweaver：這是所見即所得的工具，這會造成錯誤的依賴，如定位的模式都是使用難以維護的定位方式呈現；因此在開始就放棄 Dreamweaver 的使用，改為 Sublime Text。

而現在來說，如果對於網頁開發也會建議改用 VSCode ，除了具有 Sublime Text 的完整功能外，對於接下來的 JS 學習也會更有幫助。

維持視覺設計者的精神

雖然從平面設計轉換跑道進入網頁設計或前端開發，但我們依然需要維持視覺設計者的一些特質，如：

• 畫面細節的堅持：多年來的訓練，對於色彩及間距的具有比他人更高的敏銳度，所以畫面中如有不協調的色彩、間距、元素等等都應該本持著細節的堅持，不斷的去優化再優化，更能凸顯自己與其他前端開發者的優勢。
• 美感的持續培養：網頁設計與傳統視覺設計雖有不同之處，但依然保有相似之處，像是完形心理學、扁平化設計、國際設計風格等等都是融合了相關觀念，而這也是視覺設計師更能掌握的技能。
• 創作的心：這對我來說也是更難以具備的，雖然在設計訓練中非常講究創作，相對於程式的模組、邏輯化來說，創作出具有變化性的技法、視覺效果是具有部分衝突的，但也因為如此更能凸顯創作的價值。

雖然目前已轉為前端工程師，但還是有許多值得學習的，雖然過去曾經會想慢慢的捨棄視覺設計的技能，但反過來說設計思維及程式思維的整合才是個人的成長價值，也是他人無法取代的特點。